<template>
  <div class="knowledge">
    <!-- 图文 -->
    <div v-if="expert.length">
      <div
        class="content"
        v-for="i in expert"
        :key="i.id"
        @click="toDetails(i)"
      >
        <!-- <div v-if="i.displayMode == 1">
        <div class="item1 title">
          <p>{{ i.title }}</p>
          <div class="big-bg">
            <img :src="i.coverPath" alt="" />
          </div>
          <span>
            {{ i.createByName }} &nbsp;| &nbsp;{{ i.auditTime }} &nbsp; |
            &nbsp;{{ i.numberOfComments }}评论
          </span>
        </div>
      </div>

      <div v-if="i.displayMode == 2">
        <div class="item" v-if="i.coverPath.length === 0">
          <div class="img">
            <img v-if="i.coverPath" :src="i.coverPath[0]" alt="" />
          </div>
          <div class="right">
            <div>
              {{ i.title }}
            </div>
            <span>
              {{ i.createByName }} &nbsp;| &nbsp;{{ i.auditTime }} &nbsp; |
              &nbsp;{{ i.numberOfComments }}评论
            </span>
          </div>
        </div>
        <div class="middle title" v-if="i.coverPath.length > 0">
          <p>{{ i.title }}</p>
          <div class="imgs">
            <div
              class="imgs-one"
              v-for="(item, index) in i.coverPath"
              :key="index"
            >
              <img :src="item" alt="" />
            </div>
          </div>

          <span>
            {{ i.createByName }} &nbsp;| &nbsp;{{ i.auditTime }} &nbsp; |
            &nbsp;{{ i.numberOfComments }}评论
          </span>
        </div>
      </div> -->

        <div class="mg20" v-if="i.displayMode == 3">
          <p class="title">{{ i.title }}</p>
          <p class="bottom">
            {{ i.createByName }} &nbsp;| &nbsp;{{ i.auditTime }} &nbsp; |
            &nbsp;{{ i.numberOfComments }}评论
          </p>
        </div>
        <div class="item" v-else>
          <div class="img">
            <img v-if="i.coverPath" :src="i.coverPath[0]" alt="" />
          </div>
          <div class="right">
            <p class="title">
              {{ i.title }}
            </p>
            <p class="bottom">
              {{ i.createByName }} &nbsp;| &nbsp;{{ i.auditTime }} &nbsp; |
              &nbsp;{{ i.numberOfComments }}评论
            </p>
          </div>
        </div>
      </div>
    </div>
    <empty v-else />
    <div class="page" v-if="expert.length">
      <Page
        :total="total"
        @on-change="currentHandle"
        :page-size="params.pageSize"
        show-total
      />
    </div>
  </div>
</template>
  
<script>
import my_footer from "../../../components/footer/my_footer.vue";

import * as experts from "@/api/experts.js";
export default {
  components: {
    my_footer,
  },
  data() {
    return {
      params: {
        pageNumber: 1,
        pageSize: 10,
      },
      expert: {},
      total: 0,
    };
  },
  mounted() {
    this.getExpert();
  },

  methods: {
    getExpert() {
      let params = {
        expertId: this.$route.query.id,
        page: this.params.pageNumber,
        rows: this.params.pageSize,
      };
      experts.getKnowledge(params).then(({ code, result }) => {
        if (code === 200) {
          result.rows.forEach((ele) => {
            if (ele.coverPath) {
              console.log(ele.coverPath.split(","));
              ele.coverPath = ele.coverPath.split(",");
            }
          });
          this.expert = result.rows;
          this.total = Number(result.total);
        }
      });
    },
    //切换分页
    currentHandle(current) {
      this.params.pageNumber = current;
      this.getExpert();
    },
    //去详情
    toDetails(item) {
      if (item.resourceType == 2) {
        this.$router.push({
          path: "healthScienceDetails",
          query: { id: item.id },
        });
      } else {
        this.$router.push({ path: "informatInfo", query: { id: item.id } });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.knowledge {
  width: 100%;
  margin: 10px 0px;
}

.content {
  width: 100%;
  cursor: pointer;
}

// .middle {
//   padding: 20px 0;
//   border-bottom: 1px solid #ececec;

//   .imgs {
//     display: flex;
//     flex-wrap: wrap;
//     margin: 20px 0 20px 0;

//     .imgs-one {
//       border-radius: 10px;
//       margin-right: 20px;

//       img {
//         width: calc(410 / 1920 * 100vw);
//         height: calc(240 / 1920 * 100vw);
//         border-radius: calc(10 / 1920 * 100vw);
//       }
//     }
//   }
// }

// .item1 {
//   padding: 20px 0 10px 0;
//   border-bottom: 1px solid #ececec;

//   .big-bg {
//     margin: 20px 0 30px 0;

//     img {
//       width: calc(1280 / 1920 * 100vw);
//       height: calc(435 / 1920 * 100vw);
//       border-radius: calc(10 / 1920 * 100vw);
//     }
//   }
// }

.item {
  width: 100%;
  padding: 20px 0;
  display: flex;
  border-bottom: 1px solid #ececec;

  .img {
    width: calc(410 / 1920 * 100vw);
    height: calc(240 / 1920 * 100vw);
    img {
      width: 100%;
      height: 100%;
      border-radius: calc(10 / 1920 * 100vw);
    }
  }

  .right {
    font-family: Source Han Sans CN;
    font-weight: 400;
    margin-left: calc(20 / 1920 * 100vw);
    display: flex;
    flex-direction: column;
    flex: 1;
  }
}
.title {
  font-size: calc(26 / 1920 * 100vw);
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #2c2c2c;
  flex: 1;
}
.bottom {
  font-size: calc(20 / 1920 * 100vw);
  margin-top: calc(20 / 1920 * 100vw);
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #babbbc;
}
.mg20 {
  margin: 20px 0;
}
.page {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
</style>